<template>
    <view class="pub_page pub_recharge pub_header_padding">
        <pub-head :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box">
            <div class="num_div">
                <div class="box">
                    <div class="txt">当前余额
                        <text class="icon icon-font-basic" :class="[!show?'icon-b-eye-2':'icon-b-eye-3']"></text>
                    </div>
                    <div class="num">520.00</div>
                </div>
            </div>
            <div class="recharge_div">
                <div class="title">充值方式</div>
                <div class="inputs">
                    <input class="input" type="text" placeholder="手动输入充值金额">
                    <div class="span">元</div>
                </div>
                <div class="lis">
                    <div class="li" v-for="(li,key) in priceList" :key="key">{{ li }}元</div>
                </div>
            </div>
            <div class="pub_btn">确认充值</div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                header_color: '#fff',
                title: '充值',//标题栏内容
                left_type: 3,
                title_color: '#000',
                left_content: 'dark',
            },

            show: false,
            priceList: [50, 100, 500, 1000]
        };
    },
    onLoad() {

    },
    methods: {},
};
</script>

<style lang="scss" scoped>
.pub_recharge {
    .page_box {
        padding: 24rpx 0;

        .num_div {
            width: 100%;
            min-height: 300rpx;
            background: url("@/static/bimg/img_28.png") center no-repeat;
            background-size: 105% 100%;
            padding: 30rpx 0 0 0;

            .box {
                width: 100%;
                height: 194rpx;
                display: flex;
                flex-wrap: wrap;
                align-content: center;
            }

            .txt {
                width: 100%;
                text-align: center;
                font-size: 24rpx;
                color: rgba(255, 255, 255, 0.80);
                line-height: 32rpx;

                .icon {
                    font-size: 32rpx;
                    display: inline-block;
                    vertical-align: middle;
                    margin-left: 10rpx;
                }
            }

            .num {
                width: 100%;
                text-align: center;
                font-size: 56rpx;
                color: #FFFFFF;
                line-height: 56rpx;
                font-weight: 700;
                margin-top: 14rpx;
            }
        }

        .recharge_div {
            padding: 0 24rpx;

            .title {
                font-size: 32rpx;
                color: #222;
                line-height: 44rpx;
                font-weight: 700;
            }

            .inputs {
                width: 100%;
                height: 112rpx;
                background: #FAFAFA;
                padding: 32rpx 24rpx;
                display: flex;
                border-radius: 24rpx;
                margin-top: 32rpx;

                .span {
                    font-size: 32rpx;
                    color: #111827;
                    line-height: 48rpx;
                }

                .input {
                    flex: 1;
                    font-size: 32rpx;
                    color: #111827;
                }

                .uni-input-placeholder {
                    color: rgba(17, 24, 39, 0.45) !important;
                    font-size: 28rpx;
                }
            }
        }
    }
}
</style>
